import React from 'react';
import DataService from './DataService.js';

class SearchUserListComponent extends React.Component{

		constructor(props){
			super(props);
			this.userList = [];
		}
		componentDidMount(){
			this.userList =	DataService.getInstance().getUserService().getUserList();
			this.setState({});
			console.log('SearchUserListComponent.componentDidMount be called');
		}
		showList(){
			let filteredList = this.userList;

			if(this.props.searchValue !=''){
				filteredList = this.userList.filter((user)=>{
					if(user &&  user.firstName && user.firstName.startsWith(this.props.searchValue)){
						return true;
					}else{
						return false;
					}
				});
			}

			let list = filteredList.map((user)=>{
				return (<li key={user.id}>{user.firstName}</li>);
			});
			return list;
		}
		render(){
			return (
					<ul>
						{this.showList()}
					</ul>
				);
		}

}

export default SearchUserListComponent;